import Image from "next/image"

export default function DaService() {
  return (
    <section id="da-service" className="bg-black py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">DA Service</h2>
          <p className="mt-6 text-lg leading-8 text-gray-300">
            Our Data Availability service provides robust solutions for the Bera ecosystem, ensuring data integrity and
            accessibility.
          </p>
        </div>

        <div className="mt-16 grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3">
          {[
            {
              title: "High Performance",
              description: "Our DA service offers high throughput and low latency for optimal performance.",
              icon: "https://beraroot.com/assets/icon1-c9e9064c.svg",
            },
            {
              title: "Secure & Reliable",
              description: "Built with security-first architecture to ensure your data remains protected.",
              icon: "https://beraroot.com/assets/icon2-c9e9064c.svg",
            },
            {
              title: "Scalable Solution",
              description: "Designed to scale with your needs, supporting growing transaction volumes.",
              icon: "https://beraroot.com/assets/icon3-c9e9064c.svg",
            },
          ].map((feature, index) => (
            <div key={index} className="flex flex-col items-center">
              <div className="rounded-xl bg-gray-900/50 p-6 ring-1 ring-gray-800 h-full w-full">
                <div className="flex items-center justify-center mb-6">
                  <Image
                    src={feature.icon || "/placeholder.svg"}
                    alt={feature.title}
                    width={60}
                    height={60}
                    className="h-16 w-16"
                  />
                </div>
                <h3 className="text-xl font-semibold leading-7 text-white text-center">{feature.title}</h3>
                <p className="mt-4 text-base leading-7 text-gray-300 text-center">{feature.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
